<template>
  <div>
    <div class="node-wrap" v-if="nodeConfig.type !== 'end'">
      <div
        class="node-wrap-box"
        :class="nodeConfig.type === 'start' ? 'start-node ' : ''"
      >
        <div :class="showText || isPrewView ? '' : 'error_shadow'">
          <div class="title" :style="`background: rgb(${bgColor});`">
            <svg-icon class="iconfont" icon-class="user-task" />
            <span v-if="nodeConfig.type === 'start'">{{
              nodeConfig.name
            }}</span>
            <template v-else>
              <input
                type="text"
                v-if="isInput"
                class="ant-input editable-title-input"
                @blur="blurEvent(approverName)"
                @focus="$event.currentTarget.select()"
                v-model="approverName"
                :placeholder="defaultText"
              />
              <span class="editable-title" @click="clickEvent()">{{
                approverName
              }}</span>
              <svg-icon
                class="anticon anticon-close close"
                v-if="!isPrewView"
                @click="delNode"
                icon-class="close"
              />
            </template>
          </div>
          <div class="content" @click="setPerson">
            <div class="text">
              <span class="placeholder" v-if="!showText"
                >请选择{{ defaultText }}</span
              >
              {{ showText }}
            <svg-icon icon-class="arrow-right" />
            </div>
          </div>
          <div v-show="showError" class="error">
            <svg-icon class="icon" icon-class="warn" />
          </div>
        </div>
      </div>
      <addNode
        :isPrewView="isPrewView"
        :id="nodeConfig.id"
        :child.sync="nodeConfig.child"
      ></addNode>
    </div>

    <nodeWrap
      v-if="nodeConfig.child"
      :nodeConfig.sync="nodeConfig.child"
      :isPrewView="isPrewView"
    ></nodeWrap>
  </div>
</template>
<script>
import addNode from "./addNode.vue";
export default {
  name: "nodeWrap",
  components: { addNode },
  props: ["nodeConfig", "isPrewView"],
  data() {
    return {
      placeholderList: {
        start: "发起人",
        approval: "审核人",
      },
      isInputList: [],
      isInput: false,
      approverName: "",
    };
  },
  mounted() {
    if(!this.nodeConfig.name){
      return
    }
    let list = [this.nodeConfig.name];
    if (this.nodeConfig.name.includes("$@")) {
      list = this.nodeConfig.name.split("$@");
      list.pop();
    }
    this.approverName = list.join("");
  },
  computed: {
    defaultText() {
      return this.placeholderList[this.nodeConfig.type];
    },
    showText() {
      if (this.nodeConfig.type == "start") {
        return "所有人";
      } else if (this.nodeConfig.type == "approval") {
        if (this.nodeConfig.roleList.length) {
          const roleList = this.nodeConfig.roleList.map((e) => e.roleName);
          let str =
            this.nodeConfig.roleList.length > 1
              ? roleList.join("、")
              : roleList[0];
          if (str.length >= 10) {
            str = str.slice(0, 7) + "...";
          }
          return str;
        } else {
          return "";
        }
      }
    },
    showError() {
      if (this.isPrewView) {
        return false;
      }
      if (!this.showText) {
        return true;
      }
      if (this.nodeConfig.type === "start" && !this.nodeConfig.child) {
        return true;
      }
      return false;
    },
    bgColor() {
      if (this.nodeConfig.type === "start") {
        return ["87, 106, 149"];
      } else {
        return ["255, 148, 62"];
      }
    },
  },
  methods: {
    clickEvent(index) {
      if (this.isPrewView) {
        return;
      }
      console.log("clickEvent", index);
      this.isInput = true;
    },
    blurEvent(approverName) {
      this.isInput = false;
      if (!approverName) {
        this.approverName = "审核人";
      }
      this.$store.dispatch("workflow/updateNode", {
        name: approverName,
      });
    },
    delNode() {
      if (this.isPrewView) {
        return;
      }
      this.$store.dispatch("workflow/delNode", {
        id: this.nodeConfig.id,
        child: this.nodeConfig.child,
      });
    },

    setPerson() {
      if (this.isPrewView) {
        return;
      }
      if (this.nodeConfig.type == "approval") {
        this.$store.commit("workflow/setApproverDrawer", true);
        this.$store.dispatch("workflow/setUpdateNodeId", this.nodeConfig.id);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// .error_tip {
//   position: absolute;
//   top: 0;
//   right: 0;
//   transform: translate(150%, 0);
//   font-size: 24px;
// }

// .promoter_person .el-dialog__body {
//   padding: 10px 20px 14px 20px;
// }

// .selected_list {
//   margin-bottom: 20px;
//   line-height: 30px;
// }

// .selected_list span {
//   margin-right: 10px;
//   padding: 3px 6px 3px 9px;
//   line-height: 12px;
//   white-space: nowrap;
//   border-radius: 2px;
//   border: 1px solid rgba(220, 220, 220, 1);
// }

// .selected_list img {
//   margin-left: 5px;
//   width: 7px;
//   height: 7px;
//   cursor: pointer;
// }
.error_shadow {
  box-shadow: 0 0 5px 0 #f89898;
}
.error {
  position: absolute;
  top: 40%;
  left: calc(100% + 10px);
  .icon {
    width: 15px;
    height: 15px;
  }
}
</style>
